<template>
    <div class="user-center-container">
      <el-card class="user-card">
        <div class="user-info">
          <el-avatar :size="100" :src="userInfo.avatar" />
          <h2>{{ userInfo.username }}</h2>
          <p>{{ userInfo.email }}</p>
        </div>
        
        <el-tabs class="user-tabs">
          <el-tab-pane label="基本信息">
            <el-form :model="userInfo" label-width="100px">
              <el-form-item label="用户名">
                <el-input v-model="userInfo.username" disabled />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="userInfo.email" />
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="userInfo.phone" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateUserInfo">保存修改</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          
          <el-tab-pane label="安全设置">
            <el-form label-width="100px">
              <el-form-item label="修改密码">
                <el-button type="text" @click="showPasswordDialog = true">点击修改密码</el-button>
              </el-form-item>
              <el-form-item label="绑定第三方">
<!--                <div class="third-party-bind">-->
<!--                  <el-button v-for="item in thirdPartyList" :key="item.type" @click="bindThirdParty(item.type)">-->
<!--                    <el-icon :size="20"><component :is="item.icon" /></el-icon>-->
<!--                    {{ item.name }}-->
<!--                  </el-button>-->
<!--                </div>-->
              </el-form-item>
            </el-form>
          </el-tab-pane>
          
          <el-tab-pane label="授权应用">
            <el-table :data="authorizedApps" style="width: 100%">
              <el-table-column prop="name" label="应用名称" />
              <el-table-column prop="scope" label="授权范围">
                <template #default="{ row }">
                  <el-tag v-for="scope in row.scope" :key="scope" size="small">
                    {{ scope }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="{ row }">
                  <el-button type="text" @click="revokeAuthorization(row.client_id)">撤销授权</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      
      <el-dialog v-model="showPasswordDialog" title="修改密码" width="400px">
        <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef">
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input v-model="passwordForm.oldPassword" type="password" />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" type="password" />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="passwordForm.confirmPassword" type="password" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showPasswordDialog = false">取消</el-button>
          <el-button type="primary" @click="updatePassword">确认</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import { useAuthStore } from '@/stores/auth'
  import { User, Lock, Iphone, Message } from '@element-plus/icons-vue'
  //import { Apple, Chrome, Alipay, Wechat } from '@element-plus/icons-vue'
  
  const authStore = useAuthStore()
  
  const userInfo = ref({
    username: 'user123',
    email: 'user@example.com',
    phone: '13800138000',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
  })
  
  const showPasswordDialog = ref(false)
  const passwordForm = ref({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
  
  const passwordRules = {
    oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
    newPassword: [
      { required: true, message: '请输入新密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '请确认密码', trigger: 'blur' },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (value !== passwordForm.value.newPassword) {
            callback(new Error('两次输入密码不一致'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]
  }
  
  const thirdPartyList = [
    { type: 'wechat', name: '微信', icon: Wechat },
    { type: 'alipay', name: '支付宝', icon: Alipay },
    { type: 'apple', name: 'Apple', icon: Apple },
    { type: 'github', name: 'GitHub', icon: Chrome }
  ]
  
  const authorizedApps = ref([
    { client_id: 'app1', name: '应用1', scope: ['profile', 'email'] },
    { client_id: 'app2', name: '应用2', scope: ['openid'] }
  ])
  
  const updateUserInfo = async () => {
    // 更新用户信息逻辑
  }
  
  const updatePassword = async () => {
    // 更新密码逻辑
    showPasswordDialog.value = false
  }
  
  const bindThirdParty = (type: string) => {
    // 绑定第三方账号逻辑
  }
  
  const revokeAuthorization = (clientId: string) => {
    // 撤销授权逻辑
  }
  </script>
  
  <style lang="scss" scoped>
  .user-center-container {
    padding: 20px;
    
    .user-card {
      max-width: 1000px;
      margin: 0 auto;
      
      .user-info {
        text-align: center;
        margin-bottom: 30px;
        
        h2 {
          margin: 10px 0 5px;
        }
        
        p {
          color: #666;
        }
      }
      
      .user-tabs {
        margin-top: 20px;
      }
      
      .third-party-bind {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        
        .el-button {
          display: flex;
          align-items: center;
          gap: 5px;
        }
      }
    }
  }
  </style>